import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

// React使用的是 jsx 语法，jsx 中遇到 {} 理解成逻辑。遇到<>理解为标签
function App(){


  // 将样式定义在一个对象中
const obj = {
  color:'#f45',
  fontSize:'24px'
}

  return<>
  {/* 行内样式 */}
  <h1 style={{color:'#f45',fontSize:'24px'}}>组件内容 1+1 { 1 + 1 }</h1>
  <h2 style={obj}>我的你多大我到瓦坊</h2>
   {/* 在 React 中定义一个 class 要使用 className，因为 class 是系统关键字 */}
   <h3 className='h3'>我是 h3</h3>
  </>
}



root.render(
  <App />
);

